import { nextTick, ref, watchEffect } from 'vue';
import { createI18n } from 'vue-i18n';

// 导入语言包
import en from '@/i18n/locales/en';
import ja from '@/i18n/locales/ja';
import zhCN from '@/i18n/locales/zh-CN';
import zhTW from '@/i18n/locales/zh-TW';

// 支持的语言列表
export const SUPPORTED_LOCALES = [
  { code: 'zh-CN', name: '简体中文', flag: '🇨🇳' },
  { code: 'zh-TW', name: '繁體中文', flag: '🇹🇼' },
  { code: 'en', name: 'English', flag: '🇺🇸' },
  { code: 'ja', name: '日本語', flag: '🇯🇵' }
] as const;

export type SupportedLocale = (typeof SUPPORTED_LOCALES)[number]['code'];

// 创建响应式的当前语言状态
export const currentLocaleRef = ref<SupportedLocale>('zh-CN');

// 获取默认语言
function getDefaultLocale(): SupportedLocale {
  // 从本地存储获取
  const stored = localStorage.getItem('app-locale');
  if (stored && SUPPORTED_LOCALES.some((locale) => locale.code === stored)) {
    return stored as SupportedLocale;
  }

  // 根据浏览器语言自动检测
  const browserLang = navigator.language.toLowerCase();

  if (browserLang.startsWith('zh')) {
    if (browserLang.includes('tw') || browserLang.includes('hk') || browserLang.includes('mo')) {
      return 'zh-TW';
    }
    return 'zh-CN';
  }

  if (browserLang.startsWith('ja')) {
    return 'ja';
  }

  if (browserLang.startsWith('en')) {
    return 'en';
  }

  // 默认返回简体中文
  return 'zh-CN';
}

// 初始化当前语言
const defaultLocale = getDefaultLocale();
currentLocaleRef.value = defaultLocale;

// 创建 i18n 实例 - Composition API 模式
const i18n = createI18n({
  legacy: false, // 使用 Composition API 模式
  locale: defaultLocale,
  fallbackLocale: 'zh-CN',
  globalInjection: true, // 启用全局注入
  messages: {
    'zh-CN': zhCN,
    'zh-TW': zhTW,
    en: en,
    ja: ja
  }
});

// 监听语言变化，强制更新所有组件
watchEffect(() => {
  const currentLang = currentLocaleRef.value;
  if (i18n.global.locale.value !== currentLang) {
    i18n.global.locale.value = currentLang;
  }
});

export default i18n;

// 切换语言的工具函数
export function setLocale(locale: SupportedLocale) {
  console.log('设置语言为:', locale);

  // 更新响应式状态（这会触发watchEffect）
  currentLocaleRef.value = locale;

  // 保存到本地存储
  localStorage.setItem('app-locale', locale);

  // 更新 HTML 文档语言
  document.documentElement.lang = locale;

  // 强制触发 Vue 的响应式更新
  nextTick(() => {
    console.log('语言切换完成:', getCurrentLocale());
  });
}

// 获取当前语言
export function getCurrentLocale(): SupportedLocale {
  return currentLocaleRef.value;
}

// 创建一个全局响应式的翻译函数
let globalT: any = null;

// 全局翻译函数 - 这个函数会自动响应语言变化
export function t(key: string): string {
  if (!globalT) {
    // 延迟初始化，确保 i18n 实例已经完全创建
    globalT = i18n.global.t;
  }
  return globalT(key);
}

// 导出 useI18n hook 供组件使用
export { useI18n } from 'vue-i18n';
